import * as THREE from 'three';
import {RigidBody} from '@react-three/rapier';
import {useMemo, useRef, useState} from 'react';
import {useFrame} from '@react-three/fiber';
import {AnimatedWoman} from './AnimatedWoman.jsx';
import BlockStart from './block/BlockStart.jsx';
import BlockEnd from './block/BlockEnd.jsx';
import BlockSpinner from './block/BlockSpinner.jsx';
import BlockLimbo from './block/BlockLimbo.jsx';
import BlockAxe from './block/BlockAxe.jsx';
import Bounds from './bound/Bounds.jsx';

const geometry = new THREE.BoxGeometry(1, 1, 1);

const obstacle = new THREE.MeshStandardMaterial({color: 'orangered'});

const wall = new THREE.MeshStandardMaterial({color: 'slategrey'});

const Level = ({count = 5}) => {

  const types = [BlockSpinner, BlockLimbo, BlockAxe];

  const blocks = useMemo(() =>
    Array.from({length: count}, () =>
      types[Math.floor(Math.random() * types.length)]), [count])


  return (
    <>
      {/* <BlockStart position={[0, 0, 16]}/>
      <BlockSpinner position={[0, 0, 12]}/>
      <BlockLimbo position={[0, 0, 8]}/>
      <BlockAxe position={[0, 0, 4]}/>
      <BlockEnd position={[0, 0, 0]}/> */}

      <BlockStart geometry={geometry} position={[0, 0, 0]} />
      {blocks.map((Block, i) => {
        return <Block geometry={geometry} material={obstacle} key={i} position={[0, 0, ( i + 1 ) * -4]}/>
      })}

      <BlockEnd geometry={geometry} position={[0, 0, ( count + 1 ) * -4]}/>

      <Bounds geometry={geometry} material={wall} length={count + 2} />

      <AnimatedWoman  position={[0, 0, 0]} />
    </>
  );
};

export default Level;
